<template>
  <div style="width: 75%;margin: 0 auto;  display: flex;height: 100vh;background-color:white;">
    <div class="left">
      <el-tabs tab-position="left" v-model="searchForm.productTypeId" @tab-change="handleTabChange">
        <el-tab-pane :label="item.name" :name="item.id" v-for="item in productTypeList" :key="item.id"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <el-space direction="vertical" alignment="left" style="width: 100%">
        <el-card v-if="shopId" style="margin-bottom: 15px">
          <Shop :shopId="shopId"></Shop>
        </el-card>
        <el-space>
          <el-input v-model="searchForm.name" style="width: 500px" placeholder="请输入你感兴趣的商品" size="large"
                    clearable/>
          <el-button type="primary" icon="Search" @click="search"
                     style="background-color: #ff5000;border-color: #ff5000" size="large">搜索
          </el-button>
        </el-space>

        <!-- 搜索结果提示 -->
        <div v-if="searchForm.name" class="search-results-info">
          显示 "{{ searchForm.name }}" 的搜索结果
          <el-button type="text" @click="clearSearch">清除搜索</el-button>
        </div>

        <el-divider></el-divider>
        
        <!-- 商品展示区域 - 使用Index.vue的样式 -->
        <div class="product-section">
          <div class="product-container">
            <div v-if="listData.length > 0" class="product-grid">
              <div v-for="product in listData" 
                   :key="product.id" 
                   class="product-card" 
                   @click="goToProductDetails(product.id)">
                <div class="product-image">
                  <img :src="product.mainImg" :alt="product.name">
                </div>
                <div class="product-info">
                  <h3 class="product-name">{{ product.name }}</h3>
                  <div class="product-price">¥{{ product.price }}</div>
                  <div class="product-sales">月销{{ product.saleCount || 0 }}笔</div>
                </div>
              </div>
            </div>
            <!-- 没有搜索结果时显示 -->
            <div v-else class="no-results">
              <el-empty description="没有找到相关商品"></el-empty>
            </div>
          </div>
        </div>
        
      </el-space>
    </div>
  </div>
</template>

<script setup>
import request from "@/utils/http.js";
import {Check, Close, Delete, Edit, Refresh, Plus, Search} from '@element-plus/icons-vue'
import {ref, toRaw, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import MyEditor from "@/components/MyEditor.vue";
import MyUpLoad from "@/components/MyUpload.vue";
import router from "@/router/index.js";
import {useRoute} from "vue-router";
import Product from "@/components/Product.vue";


const searchFormComponents = ref();
const tableComponents = ref();
const listData = ref([]);
const pageInfo = ref({
  //当前页
  pageNum: 1,
  //分页大小
  pageSize: 100, // 增大页面尺寸，减少分页需求
  //总条数
  total: 0
});
const searchForm = ref({
  name: undefined,
  productTypeId: ''
});

const route = useRoute();

// 初始化组件时处理路由参数
onMounted(() => {
  // 处理路由参数
  if (route.query.name) {
    searchForm.value.name = route.query.name;
  }
  
  if (route.query.productTypeId) {
    searchForm.value.productTypeId = route.query.productTypeId;
  }
  
  // 处理shop参数
  if (route.query.shopId) {
    shopId.value = route.query.shopId;
    searchForm.value.shopId = route.query.shopId;
  }
  
  // 获取分类列表然后获取商品列表
  getProductTypeList();
  
  // 获取商品列表
  getPageList();
});

//店铺详情需要店铺的id
const shopId = ref(null)

const productTypeList = ref([])

function getProductTypeList() {
  request.get("/api/productType/list").then(res => {
    productTypeList.value = res.data;
    productTypeList.value.unshift({id: '', name: '全部'})
  })
}

/**
 * 获取分页数据
 */
function getPageList() {
  let data = Object.assign(toRaw(searchForm.value), toRaw(pageInfo.value))
  request.get("/api/product/page", {
    params: data,
    qwe:1
  }).then(res => {
    listData.value = res.data.list
    pageInfo.value.total = res.data.total
  }).catch(error => {
    console.error("获取商品列表失败:", error);
    ElMessage.error("获取商品列表失败，请稍后重试");
    listData.value = [];
  })
}

/**
 * 选择分页
 * @param e
 */
function currentChange(e) {
  pageInfo.value.pageNum = e
  getPageList()
}

/**
 * 改变分页数量
 * @param e
 */
function sizeChange(e) {
  pageInfo.value.pageSize = e
  getPageList()
  console.log(e)
}

/**
 * 搜索
 */
function search() {
  pageInfo.value.pageNum = 1
  getPageList()
}

/**
 * 清除搜索
 */
function clearSearch() {
  searchForm.value.name = '';
  pageInfo.value.pageNum = 1;
  getPageList();
}

/**
 * 跳转到商品详情页
 */
function goToProductDetails(productId) {
  router.push(`/productDetails/${productId}`);
}

/**
 * Tab change handler
 */
function handleTabChange(tab) {
  searchForm.value.productTypeId = tab;
  // Update the URL to reflect the new productTypeId
  router.push({
    path: '/productList',
    query: {
      ...route.query,
      productTypeId: tab
    }
  });
  getPageList();
}

</script>

<style scoped>
.left {
  padding: 20px;
}

.right {
  flex: 1;
  padding-top: 20px;
  padding-right: 20px;
}

.search-results-info {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.no-results {
  width: 100%;
  padding: 40px 0;
  text-align: center;
}

/* Product Display Styles - 从Index.vue复制过来 */
.product-section {
  width: 100%;
  margin: 20px auto;
}

.product-container {
  width: 100%;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 10px;
}

.product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-info {
  padding: 12px;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  color: #ff0036;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.product-sales {
  color: #999;
  font-size: 12px;
}
</style>
